<template>
  <div v-show="dbLinkID">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="名称">
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            size="mini"
            @click="openEditPop(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="详情"
      :visible.sync="isShowPop"
      width="60%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :append-to-body="true"
      @close="closePop()">
      <el-form 
        :model="tableParam" 
        ref="tableForm" 
        label-position="top"
        label-width="100px">
        <el-form-item label="中文名">
          <el-input v-model="tableParam.modelname_cn"></el-input>
        </el-form-item>
        <el-form-item label="命名空间">
          <el-input v-model="tableParam.namespace"></el-input>
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="tableParam.projectname"></el-input>
        </el-form-item>
        <el-form-item label="字段">
          <el-table
            :data="fieldList"
            style="width: 100%">
            <el-table-column
              prop="dbcolumnname"
              label="字段名">
            </el-table-column>
            <el-table-column
              prop="datatype"
              label="数据类型">
            </el-table-column>
            <el-table-column
              prop="columndescription"
              label="字段描述">
            </el-table-column>
            <el-table-column label="是否可为空">
              <template slot-scope="{ row }">
                <i :class="row.isnullable?'el-icon-check':'el-icon-close'"></i>
              </template>
            </el-table-column>
            <el-table-column label="是否为主键">
              <template slot-scope="{ row }">
                <i :class="row.isprimarykey?'el-icon-check':'el-icon-close'"></i>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowPop = false">取消</el-button>
        <el-button type="primary" @click="submitTableForm()">一键生成代码</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { 
  listtables,
  listcolumns,
  // generatecode 
} from '@/apis/codegenerator';
// import { downloadFile } from '@/utils/download';
export default {
  props: {
    dbLinkID: {
      type: String
    }
  },
  data() {
    return {
      tableData: [],
      isShowPop: false,
      tableParam: {
        modelname_cn: '',
        namespace: '',
        projectname: ''
      },
      fieldList: [],
      activeTableName: ''
    }
  },
  watch: {
    dbLinkID(val) {
      if(val) {
        listtables({dblinkid: this.dbLinkID}).then(res => {
          if(res.data) {
            this.tableData = res.data.map(x => {
              return {name: x};
            })
          } else {
            this.tableData = [];
          }
        })
      } else {
        this.tableData = [];
      }
    }
  },
  methods: {
    // 打开编辑弹框
    openEditPop(data) {
      this.isShowPop = true;
      this.activeTableName = data.name;
      listcolumns({dblinkid: this.dbLinkID, tablename: data.name}).then(res => {
        this.fieldList = res.data || [];
      })
    },
    // 关闭编辑弹框
    closePop() {
      this.tableParam = {
        modelname_cn: '',
        namespace: '',
        projectname: ''
      };
      this.fieldList = [];
      this.activeTableName = '';
    },
    // 提交表单
    submitTableForm() {
      this.tableParam.dblink_id = this.dbLinkID;
      this.tableParam.table_name = this.activeTableName;
      fetch(process.env.VUE_APP_BASE_API + '/api/codegenerator/generatecode', {
        body: JSON.stringify(this.tableParam),
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
      }).then(res => {
        res.blob().then(blob => {
          // 转化为blobURL后再通过a标签下载
          const blobUrl = window.URL.createObjectURL(blob);
          const a = window.document.createElement('a');
          a.href = blobUrl;
          a.download = '文件.zip';
          a.click();
          window.URL.revokeObjectURL(blobUrl);
        });
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog__wrapper::v-deep .el-dialog__body {
  max-height: 50vh;
  overflow: auto;
}
</style>